<template>
  <div>
    <van-popup :value="visible" @close="makeClose" :close-on-click-overlay="false" position="bottom" round :style="{ backgroundColor: '#f5f5f5' }">
      <div class="orderComfirmDelivery">
        <div class="orderComfirmDelivery_t">
          <div class="orderComfirmDelivery_t_txt">确认发货</div>
          <div class="orderComfirmDelivery_t_i" @click="makeClose">
            <i class="iconfont icon-close11"></i>
          </div>
        </div>
        <div class="list">
          <div class="txt">收件人信息</div>
          <div class="s_txt">收件人：{{ addressInfo.realname }}/{{ addressInfo.mobile }}</div>
          <div class="s_txt">收货地址：{{ addressInfo.address }}</div>
        </div>
        <div style="border-radius: 0.5rem;overflow: hidden;">
          <van-cell-group>
            <van-field v-model="express_companiesShowTxt" label="快递公司" placeholder="请选择" readonly @click="getExpress">
              <template slot="right-icon">
                <i class="iconfont icon-icon_more11"></i>
              </template>
            </van-field>
            <van-field v-model="orderSn" label="快递单号" placeholder="请输入" />
          </van-cell-group>
        </div>
      </div>
      <div class="btnBox">
        <div class="btn" @click="makeClose">取消</div>
        <div class="btn comfirmbtn" @click="comfirmDelivery">确认发货</div>
      </div>
    </van-popup>
    <van-popup v-model="express_companiesShow" round position="bottom" :style="{ backgroundColor: '#ffffff', height: '70%' }">
      <div class="express_companies">
        <div class="express_companies_t">快递公司</div>
        <div class="express_companies_list">
          <div v-for="(item, index) in express_companies" :key="index" @click="companySelect(item)" class="express_companies_item">
            <div>{{ item.name }}</div>
            <i class="iconfont icon-icon_select1" v-if="company == item.value"></i>
          </div>
        </div>
      </div>
    </van-popup>
  </div>
</template>
<script>
export default {
  props: {},
  data() {
    return {
      orderSn: "",
      company: "",
      express_companies: null,
      express_companiesShow: false,
      express_companiesShowTxt: "",
      orderId: null,
      addressInfo: {},
      visible: false
    };
  },
  mounted() {},
  methods: {
    init(id, address) {
      this.express_companiesShowTxt = "";
      this.company = "";
      this.orderSn = "";
      this.orderId = id;
      this.addressInfo = address;
      this.visible = true;
    },
    async comfirmDelivery() {
      if (!this.company) {
        this.$toast("请选择快递公司");
        return;
      }
      if (!this.orderSn) {
        this.$toast("请输入快递单号");
        return;
      }
      let json = {
        order_id: this.orderId,
        order_sn: this.orderSn,
        express_company: this.company
      };
      let { data, msg, result } = await $http.post("plugin.self-bartending.api.employee.order-operation.order-send", json, ".");
      if (result) {
        this.$toast(msg);
        this.$emit("updateData");
        this.visible = false;
      } else {
        this.$toast(msg);
      }
    },
    makeClose() {
      this.visible = false;
    },
    async getExpress() {
      this.express_companiesShow = false;
      this.express_companies = null;
      let { data, msg, result } = await $http.post("dispatch.express-list", {}, ".");
      if (result) {
        this.express_companies = data.express_companies;
        this.express_companiesShow = true;
      } else {
        this.$toast(msg);
      }
    },
    companySelect(item) {
      this.company = item.value;
      this.express_companiesShowTxt = item.name;
      this.express_companiesShow = false;
    }
  }
};
</script>
<style lang="scss" scoped>
.express_companies {
  background: #ffffff;
  .express_companies_t {
    font-weight: bold;
    font-size: 1rem;
    line-height: 3rem;
  }
  .express_companies_list {
    text-align: center;
    line-height: 2.5rem;
    .iconfont{
      color: #f15353;
    }
  }
  .express_companies_item {
    border-bottom: 1px solid #e5e5e5;
    margin: 0 0.65rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
.btnBox {
  background: #ffffff;
  padding: 0.63rem 1.25rem;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  .btn {
    flex: 1;
    background: #ffffff;
    border-radius: 1.25rem;
    border: 0.03rem solid #f15353;
    margin-right: 0.94rem;
    box-sizing: border-box;
    border-radius: 1.25rem;
    font-weight: 500;
    font-size: 0.88rem;
    color: #f15353;
    white-space: nowrap;
    height: 2.5rem;
    line-height: 2.5rem;
  }
  .comfirmbtn {
    background: #f15353;
    color: #ffffff;
    margin-right: 0;
  }
}
.orderComfirmDelivery {
  padding: 0 0.75rem;
  box-sizing: border-box;
  overflow: hidden;
  background: #f5f5f5;
  margin-bottom: 7.91rem;
  .fieldR {
    text-align: left;
  }
  .list {
    background: #ffffff;
    border-radius: 0.5rem;
    margin-bottom: 0.63rem;
    padding: 0.94rem 0.75rem;
    box-sizing: border-box;
    text-align: left;
    .txt {
      font-weight: bold;
      font-size: 1rem;
      color: #00001c;
      margin-bottom: 1rem;
    }
    .s_txt {
      font-weight: 400;
      font-size: 0.88rem;
      color: #00001c;
      margin-bottom: 0.5rem;
    }
    .s_txt:last-child {
      margin-bottom: 0;
    }
  }
  .orderComfirmDelivery_t {
    margin-top: 1.5rem;
    display: flex;
    justify-content: space-between;
    margin-bottom: 1.25rem;
    .orderComfirmDelivery_t_txt {
      font-weight: bold;
      font-size: 1rem;
      margin-left: 0.19rem;
    }
    .orderComfirmDelivery_t_i {
      width: 1.5rem;
      height: 1.5rem;
      background: #f0f0f1;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      .iconfont {
        font-size: 0.75rem;
        color: #6e6e79;
      }
    }
  }
}
</style>
